<template>
	<view class="container">
		<view class="form-group">
			<view class="form-item">
				<text class="label">隐患类型</text>
				<picker @change="bindPickerChange" :value="typeIndex" :range="dangerTypeNames">
					<view class="picker-value">
						<text>{{ dangerTypeNames[typeIndex] || '请选择隐患类型' }}</text>
						<text class="iconfont arrow-right">></text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">隐患位置</text>
				<view class="location-input">
					<input class="input-field" v-model="location.address" placeholder="点击选择或输入位置"
						@click="chooseLocationWithPermission" @blur="setLocationManually" />
					<button class="get-location-btn" @click="getCurrentLocationWithPermission">获取当前位置</button>
				</view>

				<!-- 位置详情显示 -->
				<view class="location-detail-box" v-if="location.latitude && location.longitude">
					<view class="location-name-box">
						<text class="location-name-label">位置名称:</text>
						<input class="location-name-input" v-model="location.name" placeholder="输入位置名称" />
					</view>
					<view class="location-coords">
						<text>坐标: ({{ location.latitude.toFixed(6) }}, {{ location.longitude.toFixed(6) }})</text>
					</view>
				</view>

				<!-- 地图显示 -->
				<view class="map-container" v-if="location.latitude && location.longitude">
					<map class="map" :latitude="Number(location.latitude)" :longitude="Number(location.longitude)"
						:markers="markers" scale="14" show-location>
					</map>
					<view class="location-detail">
						<text class="location-name">{{ location.name || '选择的位置' }}</text>
						<text class="location-address">{{ location.address || '' }}</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">隐患描述</text>
				<textarea class="textarea" v-model="description"
					placeholder="请详细描述隐患情况，如：教学楼A栋三楼消防通道被堆放杂物阻塞"></textarea>
			</view>

			<view class="form-item">
				<text class="label">隐患等级</text>
				<view class="radio-group">
					<view class="radio-item" :class="{ active: level === '轻微' }" @click="level = '轻微'">
						<view class="radio-circle">
							<view class="radio-inner" v-if="level === '轻微'"></view>
						</view>
						<text>轻微</text>
					</view>
					<view class="radio-item" :class="{ active: level === '一般' }" @click="level = '一般'">
						<view class="radio-circle">
							<view class="radio-inner" v-if="level === '一般'"></view>
						</view>
						<text>一般</text>
					</view>
					<view class="radio-item" :class="{ active: level === '严重' }" @click="level = '严重'">
						<view class="radio-circle">
							<view class="radio-inner" v-if="level === '严重'"></view>
						</view>
						<text>严重</text>
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">上传图片</text>
				<view class="upload-box">
					<view class="image-list">
						<view class="image-item" v-for="(item, index) in imageList" :key="index">
							<image :src="item" mode="aspectFill"></image>
							<view class="delete-btn" @click="deleteImage(index)">×</view>
						</view>
						<view class="upload-btn" @click="chooseImage" v-if="imageList.length < 3">
							<text class="upload-icon">+</text>
							<text class="upload-text">上传图片</text>
						</view>
					</view>
					<text class="upload-tips">最多可上传3张图片</text>
				</view>
			</view>
		</view>

		<view class="submit-btn" @click="submitForm">提交隐患</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dangerTypes: [], // 完整的隐患类型对象数组
			dangerTypeNames: [], // 仅用于显示的隐患类型名称数组
			typeIndex: 0,
			location: {
				name: '', // 位置名称
				address: '', // 地址文本
				latitude: '', // 纬度
				longitude: '' // 经度
			},
			markers: [], // 地图标记
			description: '',
			level: '一般', // 默认为一般
			imageList: [], // 本地图片路径
			uploadedImageList: [], // MinIO上传后的图片URL
			uploading: false, // 是否正在上传图片
			hasLocationPermission: false, // 位置权限状态
			aMapKey: 'd975789db666a6e578e36deeebbd9e2a', // 高德地图API密钥
			qqMapKey: 'A32BZ-65OEN-5HYFZ-SF6KM-5HLQK-XMFFY', // 腾讯地图API密钥
			userInfo: {} // 当前登录用户信息
		}
	},
	onLoad() {
		this.getHazardTypes();
		// 检查位置权限
		this.checkLocationPermission();
		// 获取用户信息
		this.getUserInfo();
	},
	methods: {
		// 获取隐患类型列表
		getHazardTypes() {
			uni.request({
				url: 'http://172.20.10.3:9527/security/hazardtype/list',
				method: 'GET',
				success: (res) => {
					if (res.statusCode === 200 && res.data.code === 200) {
						this.dangerTypes = res.data.data;
						// 提取类型名称用于显示
						this.dangerTypeNames = this.dangerTypes.map(item => item.typeName);
						console.log('获取隐患类型成功:', this.dangerTypes);
					} else {
						console.error('获取隐患类型失败:', res.data);
						uni.showToast({
							title: '获取隐患类型失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('请求隐患类型接口失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},
		bindPickerChange(e) {
			this.typeIndex = e.detail.value;
		},

		// 检查位置权限
		checkLocationPermission() {
			// #ifdef MP-WEIXIN
			uni.getSetting({
				success: (res) => {
					console.log('权限设置:', res.authSetting);
					if (res.authSetting['scope.userLocation']) {
						this.hasLocationPermission = true;
						console.log('已获得位置权限');
					} else {
						this.hasLocationPermission = false;
						console.log('未获得位置权限');
					}
				},
				fail: (err) => {
					console.error('获取权限设置失败:', err);
					this.hasLocationPermission = false;
				}
			});
			// #endif

			// #ifndef MP-WEIXIN
			// 其他平台默认有权限
			this.hasLocationPermission = true;
			// #endif
		},

		// 请求位置权限
		requestLocationPermission() {
			return new Promise((resolve, reject) => {
				// #ifdef MP-WEIXIN
				// 微信小程序的授权方式
				wx.authorize({
					scope: 'scope.userLocation',
					success: () => {
						console.log('位置授权成功');
						this.hasLocationPermission = true;
						resolve(true);
					},
					fail: (err) => {
						console.error('位置授权失败:', err);
						// 引导用户打开设置页面
						uni.showModal({
							title: '需要位置权限',
							content: '请授权获取位置信息，以便选择隐患位置',
							confirmText: '去设置',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									// 打开设置页面
									uni.openSetting({
										success: (settingRes) => {
											console.log('设置页面返回:', settingRes);
											if (settingRes.authSetting['scope.userLocation']) {
												this.hasLocationPermission = true;
												resolve(true);
											} else {
												this.hasLocationPermission = false;
												resolve(false);
											}
										},
										fail: (error) => {
											console.error('打开设置页面失败:', error);
											this.hasLocationPermission = false;
											resolve(false);
										}
									});
								} else {
									// 用户取消
									resolve(false);
								}
							}
						});
					}
				});
				// #endif

				// #ifndef MP-WEIXIN
				// 其他平台使用uni的API
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						this.hasLocationPermission = true;
						resolve(true);
					},
					fail: () => {
						uni.showModal({
							title: '需要位置权限',
							content: '请授权获取位置信息，以便选择隐患位置',
							confirmText: '去设置',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (settingRes) => {
											if (settingRes.authSetting['scope.userLocation']) {
												this.hasLocationPermission = true;
												resolve(true);
											} else {
												resolve(false);
											}
										}
									});
								} else {
									resolve(false);
								}
							}
						});
					}
				});
				// #endif
			});
		},

		// 获取当前位置（先检查权限）
		async getCurrentLocationWithPermission() {
			if (!this.hasLocationPermission) {
				const granted = await this.requestLocationPermission();
				if (!granted) {
					uni.showToast({
						title: '需要位置权限才能获取当前位置',
						icon: 'none'
					});
					return;
				}
			}

			this.getCurrentLocation();
		},

		// 选择位置（先检查权限）
		async chooseLocationWithPermission() {
			if (!this.hasLocationPermission) {
				const granted = await this.requestLocationPermission();
				if (!granted) {
					uni.showToast({
						title: '需要位置权限才能选择位置',
						icon: 'none'
					});
					return;
				}
			}

			this.chooseLocation();
		},

		// 获取当前位置
		getCurrentLocation() {
			uni.showLoading({
				title: '定位中...'
			});

			// 使用uni.chooseLocation方法，让系统直接打开地图获取位置
			// 这种方式能更好地获取到位置名称
			uni.chooseLocation({
				success: (res) => {
					console.log('选择位置成功:', res);

					// 保存经纬度，确保后续处理使用相同坐标
					const latitude = res.latitude;
					const longitude = res.longitude;

					// 保存选中的位置名称和地址
					const locationName = res.name || '当前位置';
					const locationAddress = res.address || '未知地址';

					// 设置位置信息
					this.location = {
						name: locationName,
						address: locationAddress,
						latitude: latitude,
						longitude: longitude
					};

					// 更新地图标记
					this.updateMapMarkers();

					uni.hideLoading();
					uni.showToast({
						title: '位置获取成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('获取位置失败:', err);
					// 如果用户取消了，则改用getLocation方法尝试
					this.getLocationFallback();
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},

		// 备用的获取位置方法
		getLocationFallback() {
			uni.showLoading({
				title: '重新定位中...'
			});

			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				success: (res) => {
					console.log('备用方法获取位置成功:', res);

					// 保存位置坐标
					const latitude = res.latitude;
					const longitude = res.longitude;

					// 先设置基本坐标，以便在API调用失败时仍有内容显示
					this.location = {
						name: '当前位置',
						address: `位置坐标(${latitude},${longitude})`,
						latitude: latitude,
						longitude: longitude
					};

					// 更新地图标记
					this.updateMapMarkers();

					// 使用地图API获取详细地址信息
					this.reverseGeoWithTxMap(latitude, longitude);
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('备用方法获取位置失败:', err);
					uni.showToast({
						title: '无法获取位置',
						icon: 'none'
					});
				}
			});
		},

		// 使用腾讯地图API解析地址
		reverseGeoWithTxMap(latitude, longitude) {
			console.log("使用腾讯地图API解析位置:", latitude, longitude);
			uni.request({
				url: `https://apis.map.qq.com/ws/geocoder/v1/`,
				data: {
					location: `${latitude},${longitude}`,
					key: this.qqMapKey,
					get_poi: 1
				},
				success: (res) => {
					console.log('腾讯地图地址解析结果:', res);

					try {
						if (res.statusCode === 200 && res.data.status === 0) {
							const result = res.data.result;

							// 更新地址信息
							this.location = {
								name: result.formatted_addresses?.recommend || result.address || '当前位置',
								address: result.address || `位置坐标(${latitude},${longitude})`,
								latitude: latitude,
								longitude: longitude
							};

							// 更新地图标记
							this.updateMapMarkers();

							uni.hideLoading();
							uni.showToast({
								title: '位置获取成功',
								icon: 'success'
							});
						} else {
							// 腾讯地图API失败，尝试高德地图API
							this.reverseGeoWithAMap(latitude, longitude);
						}
					} catch (error) {
						console.error('腾讯地图解析失败:', error);
						// 尝试高德地图API
						this.reverseGeoWithAMap(latitude, longitude);
					}
				},
				fail: (err) => {
					console.error('腾讯地图请求失败:', err);
					// 尝试高德地图API
					this.reverseGeoWithAMap(latitude, longitude);
				}
			});
		},

		// 使用高德地图API解析地址
		reverseGeoWithAMap(latitude, longitude) {
			console.log("使用高德地图API解析位置:", latitude, longitude);
			uni.request({
				url: `https://restapi.amap.com/v3/geocode/regeo`,
				data: {
					location: `${longitude},${latitude}`,
					key: this.aMapKey,
					extensions: 'all'
				},
				success: (res) => {
					console.log('高德地图地址解析结果:', res);

					try {
						if (res.statusCode === 200 && res.data.status === '1') {
							const regeocode = res.data.regeocode;
							const addressComponent = regeocode.addressComponent;
							const formattedAddress = regeocode.formatted_address;

							// 获取POI信息，如果有的话
							let poiName = '';
							if (regeocode.pois && regeocode.pois.length > 0) {
								poiName = regeocode.pois[0].name;
							}

							// 更新地址信息
							this.location = {
								name: poiName || addressComponent.township || addressComponent.district || '当前位置',
								address: formattedAddress || `${addressComponent.province}${addressComponent.city}${addressComponent.district}`,
								latitude: latitude,
								longitude: longitude
							};

							// 更新地图标记
							this.updateMapMarkers();

							uni.hideLoading();
							uni.showToast({
								title: '位置获取成功',
								icon: 'success'
							});
						} else {
							// 保留已有的位置信息，只是更新经纬度
							this.handleLocationFallback(latitude, longitude);
						}
					} catch (error) {
						console.error('高德地图解析失败:', error);
						this.handleLocationFallback(latitude, longitude);
					}
				},
				fail: (err) => {
					console.error('高德地图请求失败:', err);
					this.handleLocationFallback(latitude, longitude);
				}
			});
		},

		// 打开地图选择位置
		chooseLocation() {
			uni.chooseLocation({
				success: (res) => {
					console.log('选择位置成功:', res);

					// 保存经纬度，确保后续处理使用相同坐标
					const latitude = res.latitude;
					const longitude = res.longitude;

					// 先保存选中的位置名称和地址
					const locationName = res.name || '选择的位置';
					const locationAddress = res.address || '未知地址';

					// 设置位置信息
					this.location = {
						name: locationName,
						address: locationAddress,
						latitude: latitude,
						longitude: longitude
					};

					// 更新地图标记
					this.updateMapMarkers();

					// 如果地址为空或者是未知地址，尝试用API获取更详细的地址
					if (!locationAddress || locationAddress === '未知地址') {
						uni.showLoading({
							title: '获取详细地址...'
						});
						// 尝试用腾讯地图API获取详细地址，但保留用户选择的位置名称
						this.getTxMapAddressKeepName(latitude, longitude, locationName);
					} else {
						uni.showToast({
							title: '位置已选择',
							icon: 'success'
						});
					}
				},
				fail: (err) => {
					console.error('选择位置失败:', err);
					uni.showToast({
						title: '选择位置失败',
						icon: 'none'
					});
				}
			});
		},

		// 使用腾讯地图API获取地址但保留原位置名称
		getTxMapAddressKeepName(latitude, longitude, locationName) {
			console.log("尝试获取详细地址，保留位置名称:", locationName);
			uni.request({
				url: `https://apis.map.qq.com/ws/geocoder/v1/`,
				data: {
					location: `${latitude},${longitude}`,
					key: this.qqMapKey,
					get_poi: 1
				},
				success: (res) => {
					console.log('获取详细地址结果:', res);

					try {
						if (res.statusCode === 200 && res.data.status === 0) {
							const result = res.data.result;

							// 更新地址信息，但保留位置名称
							this.location = {
								name: locationName, // 保留原名称
								address: result.address || `位置坐标(${latitude},${longitude})`,
								latitude: latitude,
								longitude: longitude
							};

							// 更新地图标记
							this.updateMapMarkers();

							uni.hideLoading();
							uni.showToast({
								title: '位置已选择',
								icon: 'success'
							});
						} else {
							uni.hideLoading();
							// 不需要显示错误信息，因为已经有了基本位置信息
						}
					} catch (error) {
						console.error('解析地址失败:', error);
						uni.hideLoading();
						// 不需要显示错误信息，因为已经有了基本位置信息
					}
				},
				fail: (err) => {
					console.error('请求地址解析失败:', err);
					uni.hideLoading();
					// 不需要显示错误信息，因为已经有了基本位置信息
				}
			});
		},

		// 处理位置获取失败的情况
		handleLocationFallback(latitude, longitude) {
			// 保留名称，如果存在的话
			const displayName = this.location.name || '当前位置';

			this.location = {
				name: displayName,
				address: `位置坐标(${latitude},${longitude})`,
				latitude: latitude,
				longitude: longitude
			};

			// 更新地图标记
			this.updateMapMarkers();

			uni.hideLoading();
			uni.showToast({
				title: '无法获取详细地址',
				icon: 'none'
			});
		},

		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 3 - this.imageList.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					// 添加本地图片路径
					const newImages = res.tempFilePaths;
					this.imageList = [...this.imageList, ...newImages];
					
					// 上传新添加的图片到MinIO
					for (let i = 0; i < newImages.length; i++) {
						this.uploadImageToMinio(newImages[i]);
					}
				}
			});
		},

		// 上传图片到MinIO
		uploadImageToMinio(imagePath) {
			uni.showLoading({
				title: '上传图片中...'
			});
			
			this.uploading = true;
			
			// 构建文件名：使用时间戳+随机数确保唯一性
			const timestamp = new Date().getTime();
			const random = Math.floor(Math.random() * 1000);
			const extension = imagePath.substring(imagePath.lastIndexOf('.'));
			const fileName = `hazard_img_${timestamp}_${random}${extension}`;
			
			uni.uploadFile({
				url: 'http://172.20.10.3:9527/security/file/upload',
				filePath: imagePath,
				name: 'file',
				formData: {
					'fileName': fileName,
					'bucket': 'zhxy' // MinIO存储桶名称
				},
				success: (uploadRes) => {
					try {
						// 解析响应结果
						const result = JSON.parse(uploadRes.data);
						
						if (result.code === 200) {
							// 上传成功，保存MinIO返回的URL
							const imageUrl = result.data;
							this.uploadedImageList.push(imageUrl);
							
							console.log('图片上传成功:', imageUrl);
							
							uni.showToast({
								title: '图片上传成功',
								icon: 'success'
							});
						} else {
							console.error('图片上传失败:', result);
							uni.showToast({
								title: result.message || '图片上传失败',
								icon: 'none'
							});
						}
					} catch (e) {
						console.error('解析上传结果失败:', e);
						uni.showToast({
							title: '图片上传失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('图片上传请求失败:', err);
					uni.showToast({
						title: '图片上传失败',
						icon: 'none'
					});
				},
				complete: () => {
					uni.hideLoading();
					this.uploading = false;
				}
			});
		},

		// 删除图片
		deleteImage(index) {
			// 移除本地图片路径
			this.imageList.splice(index, 1);
			
			// 如果已上传的图片存在，也同步移除
			if (this.uploadedImageList.length > index) {
				this.uploadedImageList.splice(index, 1);
			}
		},

		// 提交表单
		submitForm() {
			// 检查是否有图片正在上传
			if (this.uploading) {
				uni.showToast({
					title: '图片正在上传中，请稍候',
					icon: 'none'
				});
				return;
			}
			
			// 表单验证
			if (!this.description.trim()) {
				uni.showToast({
					title: '请填写隐患描述',
					icon: 'none'
				});
				return;
			}
			
			if (this.dangerTypes.length === 0) {
				uni.showToast({
					title: '获取隐患类型失败，请稍后重试',
					icon: 'none'
				});
				return;
			}
			
			if (!this.location.latitude || !this.location.longitude) {
				uni.showToast({
					title: '请选择隐患位置',
					icon: 'none'
				});
				return;
			}
			
			// 如果地址只是经纬度，但有位置名称，合并它们
			if (this.location.address.includes('位置坐标') && this.location.name && this.location.name !== '当前位置') {
				this.location.address = this.location.name + '（' + this.location.address + '）';
			}
			
			// 提交表单数据
			uni.showLoading({
				title: '提交中...'
			});
			
			// 构建表单数据
			const formData = {
				typeId: this.dangerTypes[this.typeIndex].id, // 使用id作为外键
				hazardTypeName: this.dangerTypes[this.typeIndex].typeName, // 添加类型名称用于显示
				hazardLocation: this.location.address + (this.location.name ? ' ' + this.location.name : ''), // 确保地址格式正确
				latitude: this.location.latitude,
				longitude: this.location.longitude,
				hazardDesc: this.description,
				level: this.level,
				securityId: this.userInfo.id || this.userInfo.userId || '' // 添加当前用户ID
			};
			
			console.log('提交的表单数据:', formData);
			
			// 使用上传后的MinIO图片URL，如果没有则使用本地路径
			const imagePaths = this.uploadedImageList.length > 0 ? this.uploadedImageList : this.imageList;
			
			// 构建请求URL，添加图片路径作为URL参数
			let requestUrl = 'http://172.20.10.3:9527/security/hazard/save';
			if (imagePaths && imagePaths.length > 0) {
				requestUrl += '?';
				imagePaths.forEach((path, index) => {
					if (index > 0) requestUrl += '&';
					requestUrl += `imagePaths=${encodeURIComponent(path)}`;
				});
			}
			
			console.log('最终请求URL:', requestUrl);
			
			// 发送请求
			uni.request({
				url: requestUrl,
				method: 'POST',
				data: formData, // 直接发送formData作为请求体
				header: {
					'Content-Type': 'application/json' // 设置内容类型为JSON
				},
				success: (res) => {
					uni.hideLoading();
					if (res.statusCode === 200 && res.data.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						});
						
						// 提交成功后返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 2000);
					} else {
						console.error('提交隐患失败:', res.data);
						uni.showToast({
							title: res.data.message || '提交失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('请求提交隐患接口失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},
		// 更新地图上的标记
		updateMapMarkers() {
			// 先确保经纬度是数字类型
			this.location.latitude = Number(this.location.latitude);
			this.location.longitude = Number(this.location.longitude);

			// 设置地图标记
			this.markers = [{
				id: 1,
				latitude: this.location.latitude,
				longitude: this.location.longitude,
				title: this.location.name || '选中位置',
				iconPath: '/static/隐患上传.png', // 使用现有图标
				width: 32,
				height: 32,
				callout: {
					content: this.location.name || '选中位置',
					color: '#ffffff',
					fontSize: 12,
					borderRadius: 4,
					bgColor: '#1a4380',
					padding: 6,
					display: 'ALWAYS'
				}
			}];

			console.log('更新地图标记:', this.markers);
		},
		// 手动设置位置（允许直接输入）
		setLocationManually() {
			// 如果用户输入了位置信息，但没有坐标，设置一个默认坐标
			if (this.location.address && (!this.location.latitude || !this.location.longitude)) {
				// 使用安全的默认坐标(保定市中心)
				this.location.latitude = 38.873964;
				this.location.longitude = 115.464634;

				// 更新地图标记
				this.updateMapMarkers();

				uni.showToast({
					title: '已使用默认坐标',
					icon: 'none'
				});

				// 尝试根据输入的地址解析坐标
				if (this.location.address.length > 2) {
					this.geocodeAddress(this.location.address);
				}
			}
		},

		// 根据地址解析坐标
		geocodeAddress(address) {
			uni.showLoading({
				title: '解析地址中...'
			});

			// 使用腾讯地图API地址解析
			uni.request({
				url: `https://apis.map.qq.com/ws/geocoder/v1/`,
				data: {
					address: address,
					key: this.qqMapKey,
					region: '保定市' // 可以设置默认城市
				},
				success: (res) => {
					console.log('地址解析结果:', res);
					uni.hideLoading();

					try {
						if (res.statusCode === 200 && res.data.status === 0 && res.data.result) {
							const location = res.data.result.location;

							// 更新坐标
							this.location.latitude = location.lat;
							this.location.longitude = location.lng;

							// 如果没有位置名称，使用解析结果
							if (!this.location.name || this.location.name === '当前位置') {
								this.location.name = res.data.result.title || '已定位位置';
							}

							// 更新地图标记
							this.updateMapMarkers();

							uni.showToast({
								title: '位置解析成功',
								icon: 'success'
							});
						}
					} catch (error) {
						console.error('解析地址失败:', error);
					}
				},
				fail: (err) => {
					console.error('地址解析请求失败:', err);
					uni.hideLoading();
				}
			});
		},
		// 获取用户信息
		getUserInfo() {
			try {
				const userInfoStorage = uni.getStorageSync('userInfo');
				if (userInfoStorage) {
					this.userInfo = userInfoStorage;
					console.log('获取到用户信息', this.userInfo);
				} else {
					console.log('未找到用户信息，可能未登录');
					uni.redirectTo({
						url: '/pages/login/index'
					});
				}
			} catch (e) {
				console.error('获取用户信息失败', e);
			}
		},
	}
}
</script>

<style lang="scss">
.container {
	padding: 30rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.form-group {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	margin-bottom: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.label {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.picker-value {
	height: 90rpx;
	background-color: #f8f9fc;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #333;
}

.arrow-right {
	color: #999;
	font-size: 24rpx;
}

.textarea {
	width: 100%;
	height: 200rpx;
	background-color: #f8f9fc;
	border-radius: 10rpx;
	padding: 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.radio-group {
	display: flex;
	justify-content: space-between;
}

.radio-item {
	flex: 1;
	height: 90rpx;
	background-color: #f8f9fc;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10rpx;

	&:first-child {
		margin-left: 0;
	}

	&:last-child {
		margin-right: 0;
	}

	&.active {
		background-color: rgba(26, 67, 128, 0.1);
		color: #1a4380;
	}
}

.radio-circle {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;

	.active & {
		border-color: #1a4380;
	}
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: #1a4380;
}

.upload-box {
	margin-top: 10rpx;
}

.image-list {
	display: flex;
	flex-wrap: wrap;
}

.image-item {
	width: 160rpx;
	height: 160rpx;
	background-color: #f8f9fc;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;

	image {
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		z-index: 1;
	}
}

.upload-btn {
	width: 160rpx;
	height: 160rpx;
	background-color: #f8f9fc;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
}

.upload-icon {
	font-size: 60rpx;
	color: #ccc;
	line-height: 1;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999;
}

.upload-tips {
	font-size: 24rpx;
	color: #999;
}

.submit-btn {
	height: 96rpx;
	background: linear-gradient(to right, #1a4380, #2b6ac4);
	border-radius: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
	margin: 50rpx 30rpx;
	box-shadow: 0 6rpx 12rpx rgba(26, 67, 128, 0.2);
}

/* 位置选择相关样式 */
.location-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.input-field {
	flex: 1;
	height: 90rpx;
	background-color: #f8f9fc;
	border-radius: 10rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #333;
}

.get-location-btn {
	width: 200rpx;
	height: 90rpx;
	margin-left: 20rpx;
	background-color: #1a4380;
	color: #fff;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10rpx;
	padding: 0;
}

.map-container {
	width: 100%;
	border-radius: 10rpx;
	overflow: hidden;
	background-color: #f8f9fc;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.map {
	width: 100%;
	height: 320rpx;
	position: relative;
}

.map-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.pin-image {
	width: 40rpx;
	height: 40rpx;
}

.location-detail {
	padding: 20rpx;
	border-top: 1rpx solid #eee;
}

.location-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.location-address {
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
}

.location-detail-box {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	background-color: #f8f9fc;
	border-radius: 10rpx;
}

.location-name-box {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.location-name-label {
	font-size: 28rpx;
	color: #333;
	margin-right: 10rpx;
	white-space: nowrap;
}

.location-name-input {
	flex: 1;
	height: 70rpx;
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
	border: 1px solid #eee;
}

.location-coords {
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
}
</style>